<html>

    <head>
        <title>Texture generator</title>
        <script>
        function renderBullet() {
            var canvas = document.getElementById("bullet");
            var ctx = canvas.getContext("2d");
            var size = 32;
            canvas.width = size;
            canvas.height = size;

            var trail = false;
            ctx.lineCap = "round";
            // trail
            if (trail) {
                ctx.strokeStyle = "rgba(252, 15, 192, 0.25)";
                ctx.lineWidth = size/4 - 0.25;
                ctx.beginPath();
                ctx.moveTo(size/2, size/4);
                ctx.lineTo(size/2, size-size/4);
                ctx.stroke();
            }

            // Bullet
            ctx.strokeStyle = "#fc0fc0";
            ctx.lineWidth = size/4;
            ctx.beginPath();
            ctx.moveTo(size/2, size/4);
            ctx.lineTo(size/2, trail ? (size/2) : (size - size/4));
            ctx.stroke();
        }

        function renderShip() {
            var canvas = document.getElementById("ship");
            var ctx = canvas.getContext("2d");
            var size = 32;
            canvas.width = size;
            canvas.height = size;

            ctx.lineCap = "round";
            ctx.lineJoin = "round";
            // Bullet
            ctx.strokeStyle = "#d8d8d8";
            ctx.lineWidth = size/8;
            ctx.beginPath();
            ctx.moveTo(size/2, size/8);
            ctx.lineTo(size/4, size - size/8);
            ctx.lineTo(size - size/4, size - size/8);
            ctx.closePath();
            ctx.stroke();
        }
        function renderAsteroid() {
            var canvas = document.getElementById("asteroid");
            var ctx = canvas.getContext("2d");
            var size = 32;
            canvas.width = size;
            canvas.height = size;

            ctx.lineCap = "round";
            ctx.lineJoin = "round";
            // Bullet
            ctx.strokeStyle = "#3fd8d8";
            ctx.lineWidth = size/16;
            ctx.beginPath();
            ctx.moveTo(size/16, size/16);
            ctx.lineTo(size/16, size - size/16);
            ctx.lineTo(size - size/16, size - size/16);
            ctx.lineTo(size - size/16, size/16);
            ctx.closePath();
            ctx.stroke();
        }
        function renderParticle() {
            var canvas = document.getElementById("particle");
            var ctx = canvas.getContext("2d");
            var size = 32;
            canvas.width = size;
            canvas.height = size;

            ctx.fillStyle = "white";
            ctx.beginPath();
            ctx.arc(size/2, size/2, size/2, 0, 2 * Math.PI);
            ctx.fill();
        }
        window.onload = function(){
            renderBullet();
            renderShip();
            renderAsteroid();
            renderParticle();
        }
        </script>
    </head>
    <body style="background: black;">
        <canvas id="bullet"></canvas>
        <canvas id="ship"></canvas>
        <canvas id="asteroid"></canvas>
        <canvas id="particle"></canvas>
    </body>
</html>